<template>
  <view class="custom-swiper">
    <swiper
      class="swiper"
      :indicator-dots="false"
      :autoplay="false"
      :current="current"
      mo
      previous-margin="5px"
      next-margin="5px"
      @change="currentHandle"
    >
      <swiper-item
        v-for="(item, index) in props.bannersList"
        :key="index"
        style="width: 90%"
      >
        <view
          class="swiper-item"
          :class="{ current: current === index }"
          :style="{
            backgroundColor: item.display.backgroundColor,
            backgroundImage: `url(${item.display.backgroundImage})`,
          }"
        >
          <!-- <image class="card-bg" :src="item.display.backgroundImage" /> -->
          <view class="flex vip-info">
            <view class="leading-none pt-44px">
              <!-- <view class="level-name" :style="{ 'color': item.display.fontColor }">{{ item.name }}</view> -->
              <view>
                当前成长值{{ user.memberScore.growth }}
                <image :src="ossImg('vip/aliao.png')" />
              </view>
            </view>
            <label class="pt-20px"
              >{{
                user.memberScore.level === item.level
                  ? "当前等级"
                  : props.bannersList[current].level < user.memberScore.level
                  ? "你已超越此等级"
                  : "暂未达到此等级"
              }}
            </label>
          </view>
          <view class="vip-level" v-if="user.memberScore.growth !== 0">
            <view class="progress">
              <view
                class="progress-speed"
                v-if="
                  props.bannersList[props.bannersList.length - 1].level ===
                    user.memberScore.level ||
                  props.bannersList[current].level < user.memberScore.level
                "
                :style="{ width: 100 + '%' }"
              ></view>
              <view
                class="progress-speed"
                v-else
                :style="{
                  width:
                    (user.memberScore.growth >=
                      props.bannersList[current].growth &&
                    user.memberScore.growth <
                      props.bannersList[current + 1].growth
                      ? (user.memberScore.growth /
                          props.bannersList[current + 1].growth) *
                        100
                      : 0) + '%',
                }"
              >
              </view>
            </view>
            <view class="pointer">{{ item.name }}</view>
            <view
              v-if="
                props.bannersList[props.bannersList.length - 1].level !==
                user.memberScore.level
              "
              ><text v-if="props.bannersList[current + 1]">
                <text
                  v-if="
                    props.bannersList[current].level >= user.memberScore.level
                  "
                >
                  还差{{
                    props.bannersList[current + 1].growth -
                    user.memberScore.growth
                  }}可升级
                </text>
              </text>
              <!-- <text v-else
                >还差{{
                  props.bannersList[current].growth - user.memberScore.growth
                }}可升级</text
              > -->
            </view>
            <view class="pointer">
              {{
                props.bannersList[props.bannersList.length - 1].level ===
                item.level
                  ? "最高等级"
                  : "下一等级"
              }}
            </view>
          </view>
        </view>

        <view class="content-block">
          <label>等级权益</label>
          <view class="flex content">
            <view
              class="content_item"
              v-for="item2 in item.privileges"
              :key="item2.id"
            >
              <image :src="item2.icon"></image>
              <view class="item_name">{{ item2.displayName }}</view>
              <view class="item_desc">{{ item2.description }}</view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { defineProps, defineEmits } from "vue";
import { ossImg } from "@/utils/utils";
const emits = defineEmits(["change"]);

const props = defineProps({
  bannersList: {
    type: Array,
    default: [],
  },
});
const user = { ...uni.getStorageSync("USER_INFO") };

const duration = 700;

const current = ref(user.memberScore.level - 1);

const currentHandle = (e) => {
  console.log(e.detail.current);
  current.value = e.detail.current;
  emits("change", current.value);
};
</script>

<style lang="less" scoped>
.custom-swiper {
  position: relative;

  .indicator {
    width: 44px;
    text-align: center;
    color: white;
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    right: 16px;
    bottom: 12px;
    font-size: 10px;
    z-index: 99;
    padding: 5px 0;
    border-radius: 30px;
  }
}

.swiper {
  width: 100%;
  height: 450px;
  position: relative;
  overflow: visible;

  swiper-item {
    width: 100%;
    overflow: visible;
  }

  .swiper-item {
    width: 100%;
    margin: 0 auto;
    background-color: #eeeeee;
    height: 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s;
    position: relative;
    box-sizing: border-box;
    padding: 0 12px 20px 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    .card-bg {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
    }

    &.current {
      width: 333px;
    }

    .vip-info {
      flex: 1;
      font-size: 12px;
      z-index: 10;
      color: white;
      justify-content: space-between;
      line-height: 1;

      .level-name {
        font-size: 16px;
        margin-bottom: 10px;
      }

      image {
        width: 20px;
        height: 13px;
        vertical-align: middle;
      }
    }

    .vip-level {
      width: 100%;
      position: relative;
      display: flex;
      color: white;
      line-height: 1;
      font-size: 12px;
      align-items: center;
      justify-content: space-between;

      .pointer {
        position: relative;

        &::before {
          content: "";
          width: 6px;
          height: 6px;
          background-color: white;
          border-radius: 6px;
          position: absolute;
          z-index: 99;
          top: -8px;
          right: 50%;
          transform: translate(50%, -50%);
        }
      }

      .progress {
        position: absolute;
        top: -8px;
        right: -24px;
        width: 100%;
        height: 2px;
        background-color: #b0b1b2;

        .progress-speed {
          height: 100%;
          background-color: #fff;
        }
      }
    }
  }
}

.content-block {
  box-sizing: border-box;
  padding: 0 20px;

  label {
    display: block;
    margin: 32px 0 0 0;
    font-size: 14px;
    color: #242424;
    line-height: 1;
    font-weight: bold;
  }

  .content {
    width: 100%;
    flex-wrap: wrap;

    .content_item {
      width: 33.3%;
      text-align: center;
      margin-top: 24px;

      image {
        width: 44px;
        height: 44px;
      }

      .item_name {
        font-size: 14px;
        font-weight: 700;
        margin-top: 8.5px;
        color: #242424;
      }

      .item_desc {
        font-size: 12px;
        margin-top: 9.5px;
        color: #919191;
      }
    }
  }

  .rule-content {
    line-height: 18px;
    font-size: 12px;
    color: #707070;
    padding: 0 5px;
    box-sizing: border-box;
  }
}
</style>
